<template>
  <div>
    <div style="display: flex;width: 100%;height: 100%;align-items: center;flex-direction: column;">
      <div class="demo-input-suffix" style="width: 100%;display: flex;margin: 10px 0px;">
        <router-link to="/">
          <el-button type="success">返回</el-button>
        </router-link>
        <!-- 属性方式： -->
        <el-input
          placeholder="请输入配件编号查询"
          prefix-icon="el-icon-search"
          type="text"
          v-model="keyword"
          id="input"
        ></el-input>
        <el-button icon="el-icon-search" @click="Search()" circle></el-button>
        <!-- 添加库存按钮 -->
        <router-link to="/tb_list_add">
          <el-button type="primary" icon="el-icon-plus">添加库存</el-button>
        </router-link>
        <div style="display: flex;width: 100%;justify-content: flex-end;">
          <el-date-picker
            id="input1"
            v-model="input1"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="dataChange"
            placeholder="选择日期时间"
          ></el-date-picker>
          <el-button icon="el-icon-search" @click="SearchData" circle></el-button>
        </div>
      </div>

      <div style="display: flex; width: 100%;">
        <el-table
          :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
          border
          style="width: 100%;"
        >
          <el-table-column fixed prop="add_time" label="日期" width="160"></el-table-column>
          <el-table-column prop="fitting" label="配件名称" width="120"></el-table-column>
          <el-table-column prop="price" label="价格" width="120"></el-table-column>
          <el-table-column prop="fitting_id" label="配件编号" width="150"></el-table-column>
          <el-table-column prop="cs" label="厂商" width="200"></el-table-column>
          <!--	如果status为1，则显示已审，否则显示待审  -->
          <el-table-column prop="status" label="状态" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">已审</span>
              <span v-else>待审</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="status" label="状态" width="50"></el-table-column> -->

          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <!-- 分页 -->
        <el-pagination
          style="margin: 12px 0px"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import php from '../api/php.js';
export default {
  methods: {
    fun() {
      this.$axios({
        url: php+"tb_list.php", //请求的后台接口
        method: "get" //get请求方式
      })
        .then(response => {
          // console.log(response.data)
          this.tableData = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    dataChange(val) {
      // console.log(`时间格式---`, val); //时间格式--- (2) ['2021-01-01', '2021-01-09', __ob__: Observer]
      const date = new Date(+new Date(val[0]) + 8 * 3600 * 1000); //new Date() 括号里的加上丢失的8小时
      //   console.log(`时区格式---`, date.toISOString()); //时区格式--- 2021-01-01T00:00:00.000Z
    },
    Search() {
      let search = this.keyword;
      // console.log(search);
      // console.log(this.tableData);

      this.tableData = this.tableData.filter(function(item) {
        return item.fitting_id.match(search);
      });
    },
    // 搜索
    SearchData() {
      let search = this.keyword;
      let flag = false;
      const _keyword = document.getElementById("input1").value;
      //   console.log(_keyword);
      this.tableData.forEach(i => {
        if (i.fitting.match(_keyword)) {
          flag = true;
        }
      });
      search = flag ? _keyword : "";
      const add_time = this.input1;
      console.log(add_time);
      this.$axios({
        url: php+"search_date.php?add_time=" + add_time, //请求的后台接口
        method: "get" //get请求方式
      })
        .then(response => {
          console.log(response.data);
          //将查询到的数据显示在页面上
          //   const that = this;
        })
        .catch(error => {
          console.log(error);
        });
    },

    handleClick(row) {
      // console.log(row);
      this.$router.push("/post/" + row.id);
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    getSiteTable() {
      const params = {
        organId: 1,
        userOrganId: 1,
        authority: 0,
        page: 1,
        rows: 5,
        isPagination: false
      };
      getSiteTable(params).then(res => {
        console.log("查询题目列表信息", res);
        this.tableData = res.data;
      });
    },

    //row获取到点击事件传来的参数
    handleDelete(row) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        // 确认删除
        .then(() => {
          //获取当前id
          let id = row.id;
          //删除接口只需要传个id就行了 id是当前点击事件传过来的的id
          this.$axios({
            //获取id
            url: php+"del.php?id=" + id, //请求的后台接口
            method: "get" //get请求方式
          })
            .then(response => {
              //   console.log(response);
              this.$message({
                type: "success",
                message: "删除成功"
              });
              this.fun();
            })
            .catch(error => {
              console.log(error);
            });
        })
        //取消删除
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },

  data() {
    return {
      input1: "",
      keyword: "",
      tableData: [],
      AroundList: [], //放搜索列表的数组
      time: null, //防抖
      // 分页
      currentPage: 1, //初始页
      pagesize: 5, //    每页的数据
      total: 0
    };
  },
  mounted() {
    //生命周期,请求接口
    this.fun();
  },
  watch: {
    //监听数据变化
    tableData: function(val) {
      this.total = val.length;
    }
  },
  created() {}
};
</script>
<style scoped>
.el-input {
  width: 300px;
}
</style>
